<template>
	<el-dialog
		v-model="visible"
		:title="titleMap[mode]"
		:width="900"
		destroy-on-close
		@closed="$emit('closed')"
	>
		<sk-tabs type="border-card">
			<el-tab-pane ref="tab" label="基础信息">
				<el-form
					:model="form"
					:rules="rules"
					ref="dialogForm"
					label-width="70px"
				>
					<el-row>
						<el-col :span="24">
							<el-descriptions
								title="订单信息"
								:column="4"
								border
								label-align="right"
							>
								<el-descriptions-item>
									<template #label>往来</template>
									{{ form.company.name }}
								</el-descriptions-item>

								<el-descriptions-item>
									<template #label>入库日期</template>
									{{ form.in_date }}
								</el-descriptions-item>

								<el-descriptions-item>
									<template #label>产品</template>
									{{ form.material.spec }}
									{{ form.material.name }}
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>形态</template>
									{{ form.type.name }}
								</el-descriptions-item>

								<el-descriptions-item>
									<template #label>批号</template>
									{{ form.lot.name }}
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>包毛重</template>
									{{ form.moisture.gross }}
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>实际</template>
									{{ form.fect_auxiliary_quantity ?? 0 }}包
									{{ form.fect_quantity }}KG
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>码单</template>
									{{ form.auxiliary_quantity ?? 0 }}包
									{{ form.quantity }}KG
								</el-descriptions-item>

								<el-descriptions-item>
									<template #label>备注</template>
									{{ form.remark }}
								</el-descriptions-item>
							</el-descriptions>
						</el-col>
						<el-col :span="24">
							<el-descriptions
								title="售后信息"
								:column="4"
								border
								label-align="right"
							>
								<el-descriptions-item>
									<template #label>单号</template>
									<el-input
										v-model="form.code"
										:disabled="true"
										:placeholder="'自动生成'"
									></el-input>
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>单据日期</template>
									<el-date-picker
										v-model="form.billdate"
										type="date"
										value-format="YYYY-MM-DD"
										placeholder="请选择日期"
										style="width: 120px"
									>
									</el-date-picker>
								</el-descriptions-item>

								<el-descriptions-item>
									<template #label>类别</template>
									<skDicSelect
										v-model="form.complaint_id"
										:code="'PurchaseComplaint'"
										style="width: 60px"
										disabled
									>
									</skDicSelect>
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>备注</template>
									<el-input
										v-model="form.remark"
										clearable
									></el-input>
								</el-descriptions-item>
							</el-descriptions>

							<sc-VxeTable
								ref="save"
								:gridEvts="gridEvts"
								:data="form.details"
								:gridOps="gridOps"
								:tablecode="'customer_complaint_save'"
							>
							</sc-VxeTable>
						</el-col>
					</el-row>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="附件">
				<sk-upload
					v-model="form.attachments"
					:limit="10"
					draggable
					tip="单个文件不要超过10M,请上传图像格式文件"
				>
				</sk-upload>
			</el-tab-pane>
		</sk-tabs>

		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()"
				>保 存</el-button
			>
		</template>
	</el-dialog>

	<skBrowserChoose
		v-model="openChooseDlg"
		:name="'storage_browser'"
		@close="openChooseDlg = false"
		@select="additems"
		:params="getStorageParams()"
	>
	</skBrowserChoose>
</template>

<script>
import skBrowserChoose from "@/components/skBrowserChoose";

import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
import XEUtils from "xe-utils";
export default {
	emits: ["success", "closed"],
	components: { skAutoChoose, skDicSelect, skBrowserChoose },
	data() {
		return {
			mode: "add",
			openChooseDlg: false,
			gridEvts: {
				choose: () => (this.openChooseDlg = true),
			},
			titleMap: {
				add: "新增",
				edit: "编辑",
			},

			form: {
				id: "",
				company: { name: "" },
				moisture: {},
				material: {},
				lot: {},
				type: {},
				color: {},
				price: 0,
				quantity: 0,
				details: [],
				complaint_id: 2,
				attachments: [],
				remark: "",
			},
			rules: {
				complaint_id: { required: true, message: "请选择售后类别" },
			},
			visible: false,
			isSaveing: false,
			gridOps: {
				height: 205,
				columns: [
					{
						field: "fect_auxiliary_quantity",
						event: {
							keyup: ({ row }) => {
								row["fect_quantity"] =
									row["fect_auxiliary_quantity"] *
									this.form.moisture.gross;
								row["auxiliary_quantity"] =
									row["fect_auxiliary_quantity"];
								row["quantity"] =
									row["auxiliary_quantity"] * 25;
							},
						},
					},
					{
						field: "fect_quantity",
						event: {
							keyup: ({ row }) => {
								row["auxiliary_quantity"] = row[
									"fect_auxiliary_quantity"
								] = row["fect_quantity"] / 25;
							},
						},
					},
					{
						field: "auxiliary_quantity",
						event: {
							keyup: ({ row }) => {
								row["quantity"] =
									row["auxiliary_quantity"] * 25;
							},
						},
					},
					{
						field: "quantity",
						event: {
							keyup: ({ row }) => {
								row["auxiliary_quantity"] =
									row["quantity"] / 25;
							},
						},
					},
				],
			},
		};
	},
	computed: {},

	mounted() {
		let userInfo = this.$TOOL.data.get("USER_INFO");
		this.form.department_id = userInfo.department_id;
	},
	methods: {
		getStorageParams() {
			return [
				{ material_id: this.form.material_id },
				{ "lot.name": this.form.lot_name },
			];
		},

		additems(items) {
			this.openChooseDlg = false;
			items.map((row) => {
				delete row.id;
				row["fect_auxiliary_quantity"] = row["auxiliary_quantity"] =
					XEUtils.toNumber(row["available_auxiliary_quantity"]);
				row["fect_quantity"] = row["quantity"] = XEUtils.toNumber(
					row["available_quantity"]
				);
				this.form.details.push(row);
				return row;
			});
		},

		//显示
		open(mode = "add") {
			this.mode = mode;
			this.visible = true;
			return this;
		},

		//表单提交方法
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;

					var res =
						await this.$API.market.customer_complaint.save.post(
							this.form
						);
					this.isSaveing = false;
					if (res.code == 200) {
						this.$emit("success", this.form, this.mode);
						this.visible = false;
						this.$message.success("操作成功");
					}
				}
			});
		},
		getItems(code) {
			return this.$API.market.customer_complaint.details
				.post({
					filter: [{ code: code }],
				})
				.then((v) => {
					return v.data.rows.map((vv) => {
						vv["amount"] = -vv["amount"];
						vv["quantity"] = -vv["quantity"];
						vv["auxiliary_quantity"] = -vv["auxiliary_quantity"];
						vv["fect_quantity"] = -vv["fect_quantity"];
						vv["fect_auxiliary_quantity"] =
							-vv["fect_auxiliary_quantity"];
						return vv;
					});
				});
		},
		getInfo(red_id) {
			return this.$API.purchase.storage.list
				.post({
					filter: [{ id: red_id }],
				})
				.then((v) => {
					return v.data.rows[0];
				});
		},
		//表单注入数据
		async editSetData(data) {
			this.getItems(data.code).then((res) => {
				this.form.details = res;
			});
			this.getInfo(data.main.red_id).then((v) => {
				this.form.old_billdate = v.billdate;
				Object.assign(
					this.form,
					this.$TOOL.removeNull(v),
					this.$TOOL.removeNull(data.main)
				);
			});
		},
		//表单注入数据
		async setData(data) {
			Object.assign(this.form, data);
			this.form.relation_code = this.form.code;
			this.form.red_id = this.form.id;
			this.form.old_billdate = this.form.billdate;
			this.form.billdate = XEUtils.toDateString(new Date(), "yyyy-MM-dd");

			delete this.form.id;
			delete this.form.code;
			return this;
		},
	},
};
</script>
